﻿<!DOCTYPE html>

<html>
<head>
<title></title>
<script type="text/javascript">
    function draw() {
        var canvas = document.getElementById("Canvas1");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "rgb(200,0,0)"; //颜色rgb(200,0,0)色
            ctx.fillRect(10, 10, 55, 50); //矩形,左上角点位置(10,10),长是55,高是50

            ctx.fillStyle = "rgba(0,0,200,0.5)"; //颜色rgb(0,0,200)色,透明度为50%
            ctx.fillRect(30, 30, 55, 50); //矩形,左上角点位置(30,30),长是55,高是50
        }
    }
    window.onload = draw;
</script>
</head>
<body>
    <canvas id="Canvas1" width="150" height="150"></canvas>
</body>
</html>
